
import React,{Component,PropTypes} from "react"
import { connect } from 'react-redux'

import AppBar from "../common/AppBar"
import * as BlogAction from "../../redux/modules/blog"

import { Paper, TextField, RaisedButton } from 'material-ui';

export default class BlogItemDetail extends Component{
  static propTypes={
    blog:PropTypes.object.isRequired,
    dispatch: PropTypes.func.isRequired
  };

  static contextTypes={
    history: PropTypes.object.isRequired
  };

  constructor(props){
    super(props)
  }

  componentDidMount(){
    const {dispatch,params}=this.props;
    if(params.id!==undefined){
      dispatch(BlogAction.setBlog(params.id))
    }

  }

  doSave(){
  //  event.preventDefault();

    const { history } = this.context;
    const { params,blog,dispatch } = this.props;
    const isEdit = history.isActive(`/blog/${params.id}/edit`);
    isEdit? dispatch(BlogAction.updateBlog(blog)) : dispatch(BlogAction.createBlog(blog));

    history.pushState(null, '/');
  }

  getStyles() {
    return {
      main: {
        position: "absolute",
        right: 0,
        minHeight: "100%",
        background:"#eaeaea",
        left: "300px",
        maxWidth: "1000px",
        margin: '30px 40px 30px 40px'
      },
      paper: {
        padding: 20
      },
      form: {
      },
      textField: {
        width: '100%'
      },
      submit: {
        float: 'right',
        marginTop: 10
      },
      cancel: {
        float: 'right',
        marginTop: 10,
        marginLeft:10,
      }
    };
  }

  render(){
    var {blog,dispatch}=this.props;
    const styles = this.getStyles();
    const { history } = this.context;
    blog = history.isActive(`/blog/new`)?{}:blog;
    const form = (
      <form
        style={styles.form}
        onChange={({target})=>{
          dispatch(BlogAction.changeBlog({ [target.name]: target.value }))
        }}
        >
        <TextField
          name='username'
          style={styles.textField}
          hintText='username'
          floatingLabelText='username'
          value={blog.username}
          />
        <TextField
          name='avatar'
          style={styles.textField}
          hintText='avatar'
          floatingLabelText='avatar'
          value={blog.avatar}
          />
        <TextField
          name='title'
          style={styles.textField}
          hintText='title'
          floatingLabelText='title'
          value={blog.title}
          />
        <TextField
          name='subtitle'
          style={styles.textField}
          hintText='subtitle'
          floatingLabelText='subtitle'
          value={blog.subtitle}
          />
        <TextField
          name='poster'
          style={styles.textField}
          hintText='poster'
          floatingLabelText='poster'
          value={blog.poster}
          />
        <TextField
          name='body'
          style={styles.textField}
          hintText='body'
          floatingLabelText='body'
          value={blog.body}
          />
        <RaisedButton
          type='button'
          style={styles.cancel}
          label='Cancel'
          onClick={()=>history.pushState(null, '/')}
          secondary={true} />

        <RaisedButton
          type='button'
          style={styles.submit}
          label='Save'
          onClick={this.doSave.bind(this,blog)}
          primary />

        <div style={{ clear: 'both' }}/>
      </form>
    );
    return (
        <AppBar>
          <div style={styles.main}>
            <Paper style={styles.paper} zDepth={2}>
              {form}
            </Paper>
            </div>
        </AppBar>
    );
  }
}



export default connect((state)=>({
  blog:state.blog.blog
}))(BlogItemDetail);
